import { Analytics, order } from "@mall/api-services"
import { Card, Col, Row, Statistic } from "antd"
import * as React from "react"
import { useEffect, useState } from "react"
import { Link, useParams } from "react-router-dom"

export default function TotalOverview() {
  const { storeId } = useParams()

  const [totalOrderQuantity, setTotalOrderQuantity] = useState(new Analytics.Store.StoreTotalOrderQuantity())

  useEffect(() => {
    Analytics.Store.StoreReportService
      .countTotalOrderQuantity(storeId)
      .then(setTotalOrderQuantity)
  }, [storeId])

  const awaitingPaymentSearch = encodeURI([order.OrderStatus.Pending, order.OrderStatus.AwaitingPayment].join(","))

  return (
    <Card>
      <Row style={{ textAlign: "center" }}>
        <Col span={4}>
          <Link to={{ pathname: `orders`, search: `statuses=${awaitingPaymentSearch}` }}>
            <Statistic title="待付款" value={totalOrderQuantity.pendingQuantity + totalOrderQuantity.awaitingPaymentQuantity}/>
          </Link>
        </Col>
        <Col span={4}>
          <Statistic title="待发货"
                     value={totalOrderQuantity.awaitingFulfillmentQuantity + totalOrderQuantity.awaitingShipmentQuantity}/>
        </Col>
        <Col span={4}>
          <Statistic title="待签收" value={totalOrderQuantity.partiallyShippedQuantity + totalOrderQuantity.shippedQuantity}/>
        </Col>
        <Col span={4}>
          <Statistic title="退款/售后" value={totalOrderQuantity.disputedQuantity}/>
        </Col>
        <Col span={4}>
          <Statistic title="物流异常" value={0}/>
        </Col>
        <Col span={4}>
          <Statistic title="违规" value={0}/>
        </Col>
      </Row>
    </Card>
  )
}
